<div class="query-builder">
	<form [formGroup]="searchForm" class="h" nz-form>
		<div class="flex w align-items-center h">
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>船信息</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="transportShipId" nzShowSearch nzAllowClear (nzOnSearch)="searchShipList($event)"
											 (ngModelChange)="searchBillList($event)">
							<nz-option *ngFor="let item of shipList" [nzValue]="item!.transportShipId"
												 [nzLabel]="item!.shipInfo"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<nz-form-item nzFlex>
					<nz-form-label>单号</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="transportBillId" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of billList" [nzValue]="item!.transportBillId"
												 [nzLabel]="item!.billNo"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-5 col-1-5-md">
				<div class="flex">
					<button (click)="search()" class="mr10" nz-button nzType="primary">搜索</button>
					<button (click)="reset()" class="mr10" nz-button nzType="default">重置</button>
				</div>
			</div>
		</div>
	</form>
</div>
<nz-card [nzBodyStyle]="{ padding: '12px 12px 0px 12px' }" [nzBordered]="false" class="card-table" style="min-height: calc(100vh - 200px)">
	<st
		#st
		[size]="'small'"
		class="hover-table fix-table st-odd-table"
		[resizable]="true"
		[scroll]="{ y: 'calc(100vh - 265px)' }"
		[data]="dataList"
		[columns]="columns"
		[page]="pageSetting"
		[total]="this.pageInfo.total"
		[ps]="this.pageInfo.size"
		[pi]="this.pageInfo.current"
		[loading]="this.pageInfo.loading"
		(change)="stChange($event)"
		[clickRowClassName]="sa"
		[footer]="total"
	>
		<ng-template st-row="billNo" let-item>
			<a class="text-blue-500" (click)="detail(item)">{{ item?.billNo }}</a>
		</ng-template>
		<ng-template #total>
			<div class="flex w-full">
				<div class="flex w-full justify-end gap-5">
					<div class="flex">总退关件吨：{{ totalData?.allRetreatPiece }} / {{ totalData?.allRetreatTon }}</div>
					<div class="flex">总提货件吨：{{ totalData?.allOutPiece }} / {{ totalData?.allOutTon }}</div>
					<div class="flex">总结余件吨：{{ totalData?.allLeftPiece }} / {{ totalData?.allLeftTon }}</div>
				</div>
			</div>
		</ng-template>
	</st>
</nz-card>
